<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>关系选择器</title>
		<style>
			ul>li{
				float: left;
				list-style: none;
			}
			dl{
				display:none;
			}

		</style>
	</head>
	<body>
		<!--子代选择器-->
		<!--点击显示-->
		<ul>
			<li>
				li1
				<dl>
					<li>12</li>
					<li>34</li>
				</dl>
			</li>
			<li>li2</li>
			<li>li3</li>
			<li>li4</li>
			<li>li5</li>
		</ul>
		<style type="text/css">
			/*Q:
			1.作用于哪个元素
			作用于dl元素
			2.控制什么属性
			控制显示dl元素
			3.当鼠标悬停在li标签上时,子元素dl的display属性改为block*/
			li:hover>dl{
				display: block;
			}
			/*[属性选择器]*/
			input[type="checkbox"]:checked+span{
				font-size: 20px;
			}
			input[type="checkbox"]{
				display: none;
			}
		</style>
		<!--相邻选择器-->
		<!--点击字体会变大-->
		<label>
			<input type="checkbox" name="" id="" value="" />
			<span>文字变大为20px</span>
		</label>
		
		<style type="text/css">
			.base~p{
				color: skyblue;
			}
		</style>
		<p>我是第0个p标签</p>
		<div class="base">base</div>
		<p>我是第1个p标签</p>
		<p>我是第2个p标签</p>
		<p>我是第3个p标签</p>
		<p>我是第4个p标签</p>
		<p>我是第5个p标签</p>
		
	</body>
</html>
